<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="echartMap" style="width: 1000px;height:1000px;"></div>
<script src="./js/jquery.js"></script>
<script src="./js/echarts.min.js"></script>

<script type="text/javascript">
    function GetRandomNum(Min, Max) {
        var Range = Max - Min;
        var Rand = Math.random();
        return (Min + Math.round(Rand * Range));
    }
    function randomData(){
        var datas = [];
        var flag = 0;
        var temp="";
        for (var i = 1; i <= 25; i++) {
            var jsonData = {};
            var lo = [];
            var aaa = GetRandomNum(104, 108) + Math.random();
            var bbb = GetRandomNum(25, 28) + Math.random();
            if (temp == aaa) {
                aaa = GetRandomNum(104, 108) + Math.random();
                i--;
                flag = 1;
            }
            temp = aaa;
            lo[0] = aaa;
            lo[1] = bbb;
            lo[2] = 2;
            jsonData.name = "水站" + i;
            jsonData.value = lo;
            jsonData.symbolSize = 10;
            if (flag == 0) {
                datas.push(jsonData);
            }
        }
        return datas;
    };


    function render_water(mapCode) {
        var myChart = echarts.init(document.getElementById('echartMap'));
        $.get("./map/geo/" + mapCode+".json", function (geoJson) {
            //debugger
            echarts.registerMap(mapCode, geoJson);

            var coldCar=randomData();
            // 基于准备好的dom，初始化echarts实例

            var option = {
                tooltip: {
                    show: true,
                    trigger: 'item',
                    triggerOn: 'click',
                    formatter: "名称:{b}<br />坐标:{c}"
                },
                series: [{
                    type: 'custom',//配置显示方式为用户自定义
                    coordinateSystem: 'geo',
                    renderItem: function (params, api) {//具体实现自定义图标的方法
                        // debugger
                        return {
                            type: 'text',
                            style: {
                                text: coldCar[params.dataIndex].name,
                                fill: '#fff',
                                textBorderColor:"#000",
                                textBackgroundColor:"blue",
                                textPadding:6,
                                textBorderRadius:10,
                                textVerticalAlign:"bottom",
                                x: api.coord([
                                    coldCar[params.dataIndex].value[0], coldCar[params.dataIndex]
                                        .value[1]
                                ])[0],
                                y: api.coord([
                                    coldCar[params.dataIndex].value[0], coldCar[params.dataIndex]
                                        .value[1]
                                ])[1]
                            }
                        }
                    },
                    data: coldCar
                }
                ],
                legend: {
                    type: "plain",
                    show: true,
                    orient: 'vertical',
                    top: 'middle',
                    left: 'left',
                    data: [
                        {
                            name: "水质自动监测站分布",
                            icon: "circle",
                            textStyle: {
                                color: "#a9d6fa"
                            }
                        }
                    ]
                },
                geo: {//引入贵州省的地图
                    map: mapCode,
                    label: {
                        emphasis: {
                            show: false
                        }
                    },
                    roam: true,
                    zoom: 1,
                    itemStyle: {
                        normal: {
                            borderColor: '#387ba7',
                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                            shadowBlur: 10,
                            shadowOffsetX: 10
                        },
                        emphasis: {

                        }
                    }
                }
            };
            myChart.setOption(option);
        });

    }

    render_water("520100");

</script>
</body>

</html>